<template>
    <div class="addtesting" :style="'height:' + height + 'px;'">
        <HeadTop :title="headTitle"></HeadTop>
        <div class="search">
            <img src="../../../../assets/search.png"/>
            <input v-model="keyword" placeholder="搜索鱼缸或鱼只" @keyup.enter="getYu()"/>
        </div>
        <div class="seclect" v-show="show" @click="showF"></div>
        <div class="select-list" v-show="show">
          <div :class="{active:fistListIdx.indexOf(item.id)!=-1}" v-for="(item, index) in fishList" :key="index" @click="idxChange(item.id)">
            <div class="img">
              <img :src="item.picture" />
            </div>
            <div class="name">{{item.tankName}}</div>
            <img class="true-icon" src="../../../../assets/icon-active.png" v-show="fistListIdx.indexOf(item.id)!=-1"/>
          </div>
        </div>
        <div class="testing-table">
            <div class="testing-left">
                <div>日期</div>
                <div  v-for="(item, index) in ygList" :key="index" :class="{'one-line': (index + 1)%2 ===1}">
                  {{item.fishTankName }}
                </div>
            </div>
            <div class="testing-list">
               <div v-for="(item, index) in title" :key="index" >
                  <div>{{item.indicatorName+ '('+item.measurement+')'}}</div>
                  <div v-for="(v, idx) in ygList" :key="idx"  :class="{'one-line': (idx + 1)%2 ===1}">
                    <input v-model="v.indicators[index].value"/>
                  </div>
                </div>
            </div>
        </div>
        <div class="addClass-btn">
            <!-- <div class="addClass-btn-hold" @click="submit(0)">保存</div> -->
            <div class="addClass-btn-submit" @click="submit(1)">提交</div>
        </div>

    </div>
</template>
<script>
import { getMedictionList, addIndicatorReport, getMedictionOperation, getFishTankSearchList, getIndicators, getTodayIndicatorReport} from '../../../../api/index.js'
import HeadTop from '../../../../components/headTop.vue'
import { getYYYYMMDD } from '../../../../api/unit.js'
export default {
  data () {
    return {
      headTitle: '水质监测报表',
      value: 0,
      value2: 0,
      opt: [],
      opt2: [],
      height: document.documentElement.clientHeight,
      tips: '',
      fodderQuantity: '',
      show: false,
      keyword: '',
      fishList: [],
      fishList2: [],
      fistListIdx: [],
      title: [],
      msg:[],
      ygList: []
    }
  },
  filters: {
    format: function (value) {
      return getYYYYMMDD(value).nTime
    }
  },
  async mounted () {
    this.getData()
    let title = await getIndicators()
    this.title = title.data
    // debugger
  },
  methods: {
    async getData () {
      let msg = await getMedictionList('a8e986eb-2d28-40cb-bdec-699c199d1e4c')
      let idx = 0
      msg.data.map(v => {
        v.text = v.medictionName
        v.value = idx
        idx++
      })
      this.opt = msg.data
      this.value = msg.data[0].value
      let msg2 = await getMedictionOperation()
      let idx2 = 0
      msg2.data.map(v => {
        v.text = v.operationName
        v.value = idx2
        idx2++
      })
      this.opt2 = msg2.data
      this.value2 = msg2.data[0].value
    },
    async submit (v) {
      let msg = []
      this.ygList.map(v=>{
        v.indicators.map(h=>{
          let obj={
            fishTankId: v.fishTankId,
            indicatorId: h.indicatorId,
            value: h.value
          }
          msg.push(obj)
        })
      })
      let result = await addIndicatorReport(msg)
      if (result.code === 10000) {
        this.$router.go(-1)
      } else {
        this.$notify({ type: 'danger', message: result.msg })
      }
    },
    async getYu () {
      this.fistListIdx=[]
      let list = await getFishTankSearchList(this.keyword)
      this.fishList = list.data
      this.show = true
    },
    async showF () {
      let ygList = await getTodayIndicatorReport(this.fistListIdx)
      this.ygList = ygList.data
      this.show = false

    },
    idxChange (id) {
      let idx = this.fistListIdx.indexOf(id)

      if ( idx === -1) {
        this.fistListIdx.push(id)
      } else {
        this.fistListIdx.splice(id, 1)
      }
      console.log(this.fistListIdx)
    }
  },
  components: {
    HeadTop
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .addtesting
        position: relative;
        background: #e5e5e5
        height: 100%
        .addClass-btn
            width: 750px
            background: #e5e5e5
            display: flex
            justify-content: space-around
            align-items: center
            height: 154px
            font-size: 32px
            .addClass-btn-hold
                width: 332px;
                height: 111px;
                line-height: 111px
                text-align: center
                background: #fff
                font-weight: bold
                color: #999
            .addClass-btn-submit
                width: 750px
                height: 111px
                line-height: 111px
                text-align: center
                color: #009EEA
                background: #fff
                font-weight: bold
        .search
            position:fixed;
            top:110px
            z-index 99
            width: 750px
            font-size: 28px
            background: #fff
            height: 109px
            display: flex
            align-items: center
            justify-content: center
            &>img
                width: 31px
                height: 31px
                margin-right: 16px
            &>input
                width: 500px
        .title
            display: flex
            justify-content: center
            align-items: center
            flex-wrap: nowrap;
            font-size: 30px
            width: 750px
            height: 41px
            padding: 25px 0
            background: #fff
            margin-top: 125px
            &>div:first-child
                width: 183px

            &>div
                text-align: center
                /*width:132px*/
                width:300px
        .title-con
            color: #B3B3B3
        .seclect
            position:fixed;
            top:0;
            z-index: 98
            opacity:0.5
            background: #000
            height: 100%
            width:750px
        .select-list
            position:fixed;
            top:228px;
            background: #fff
            z-index: 100
            padding:40px
            width: 670px
            display: flex
            justify-content: space-between
            flex-wrap: wrap
            .active
                position: relative
                border:2px solid #3689D6;
                .true-icon
                    position:absolute
                    bottom: 0
                    right: 0
                    width:39px
                    height:39px
            &>div
               padding: 6px 8px
               width:295px;
               height:78px;
               border:2px solid #DCDADB;
               border-radius:6px;
               display: flex
               margin-bottom: 15px
               .img
                  width: 120px
                  height: 78px
                  img
                    width: 120px
                    height: 78px
              .name
                  display: flex
                  justify-content:center
                  align-items: center
                  font-size:28px;
                  margin-left: 36px
                  color #757575
        .testing-table
            display: flex
            width: 750px
            margin-top 125px
            .testing-left
              width: 183px
              font-size: 30px
              line-height: 90px
              &>div
                   width: 183px
                   display: inline-block;
                   height: 90px
                   text-align: center
                   background #fff
              .one-line
                 background: #FAF9F9
            .testing-list
              white-space: nowrap;
              overflow-y: hidden;
              // overflow-x hidden
              font-size: 30px
              width: 567px
              line-height: 90px
              background #fff
              &>div
                  width: 135px
                  display: inline-block;
                  text-align: center
                  background #fff
                  line-height 90px
                  // border-left 1px solid #D7D7D7
                  input
                    height: 42px
                    width: 135px
                    background #fff
                    text-align center
                    border-left 1px solid #d7d7d7
              .one-line
                  background: #FAF9F9
                  input
                    // height: 90px
                    // width: 135px
                    background #FAF9F9
                    // text-align center
</style>
